<template>
    <view class="cus-apge">
        <!-- 分段器 -->
        <view class="subsection">
            <u-subsection bgColor="#fff" fontSize="32rpx" activeColor="#02BDF3"
                :list="subsections" :current="current" @change="subsection">
            </u-subsection>
        </view>
        <!-- 底部安全距离 -->
        <u-gap height="45px" bgColor="transparent"></u-gap>

        <!-- 统计 -->
        <view class="top type-area com-flex com-row-between">
            <view class="com-minor-color">
                共有<text class="com-price-color">3</text>件产品
            </view>
            <text class="com-price-color" @tap="edit=!edit">{{edit ? '完成': '编辑'}}</text>
        </view>

        <!-- 列表 -->
        <view class="type-area">
            <!-- 商品 -->
            <view v-if="current==0" class="card">
                <u-checkbox-group v-model="checked" @change="checkboxChange">
                    <view style="width:100%">
                        <view v-for="item in list" :key="item" class="com-flex good-item">
                            <view v-if="edit" class="com-m-r-8">
                                <u-checkbox :name="item" size="40rpx" shape="circle" iconSize="30rpx" />
                            </view>
                            <image src="/static/logo.ico" alt=""></image>
                            <view class="com-row-between right">
                                <text class="u-line-2 com-lh-40">
                                    宝可梦对战预组卡片集换式游戏简中日月第1弹神奇宝贝皮卡丘冠
                                </text>
                                <u-tag bgColor="#EAFAFF" borderColor="#EAFAFF" color="#02BDF3" size="mini" text="二手" />
                                <view class="com-price-color">
                                    <text class="com-font-32 com-font-bold">1660</text>
                                    <text class="com-font-26">日元</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </u-checkbox-group>
            </view>

            <!-- 卖家 -->
            <view v-if="current==1" class="card">
                <u-checkbox-group v-model="checked" @change="checkboxChange">
                    <view style="width:100%">
                        <view v-for="item in list" :key="item" class="com-flex seller-item">
                            <view v-if="edit" class="com-m-r-8">
                                <u-checkbox :name="item" size="40rpx" shape="circle" iconSize="30rpx" />
                            </view>
                            <image src="/static/logo.ico" alt=""></image>
                            <view class="com-m-l-24 text">
                                <text>精神境界</text>
                                <view class="com-flex">
                                    <text class="com-font-12 com-minor-color">信誉等级：</text>
                                    <u-rate :count="5" v-model="value" activeColor="#f60" size="30rpx"></u-rate>
                                </view>
                                <view class="com-flex com-active-color">
                                    <view class="com-flex real-name" 
                                        :style="{ 
                                            background: item%2==0 ? '#fff' : '#F1F1F1',
                                            border: item%2==0 ? '1px solid #02BDF3' : '1px solid #F1F1F1'
                                        }">
                                        <u-icon 
                                            :color="item%2==0 ? '#02BDF3' : '#979797'"
                                            :name="item%2==0 ? 'checkmark-circle-fill' : 'checkmark-circle'">
                                        </u-icon>
                                        <text :class="['com-m-l-10 com-font-20', item%2==0 ? 'com-active-color' : 'com-minor-color' ]">
                                            {{item%2==0 ? "已实名认证" : "未实名认证"}}
                                        </text>
                                    </view>
                                    <view class="com-flex com-m-l-45">
                                        <u-icon name="twitter" color="#02BDF3"></u-icon>
                                        <text class="com-m-l-12 com-font-24">已代购146次</text>
                                    </view>
                                </view>
                            </view>
                            <view v-if="!edit" class="com-flex com-row-center btn">进入店铺</view>
                        </view>
                    </view>
                </u-checkbox-group>
            </view>

            <!-- 活动 -->
            <view v-if="current==2" class="card">
                <u-checkbox-group v-model="checked" @change="checkboxChange">
                    <view style="width:100%">
                        <view v-for="item in 3" :key="item" class="com-flex activity-item">
                            <view v-if="edit" class="com-m-r-8">
                                <u-checkbox :name="item" size="40rpx" shape="circle" iconSize="30rpx" />
                            </view>
                            <image style="width:140rpx;height:140rpx" src="/static/logo.ico" alt=""></image>
                            <view class="com-row-around right" style="height:140rpx">
                                <text class="u-line-2 title">
                                    宝可梦对战预组卡片集换式游戏简中日月第1弹神奇宝贝皮卡丘冠...
                                </text>
                                <text class="com-font-24 com-assist-color">2022-12-24 16:23:56</text>
                            </view>
                        </view>
                    </view>
                </u-checkbox-group>
            </view>
        </view>
        <!-- 间隙 -->
        <u-gap height="30rpx" bgColor="transparent"></u-gap>


        <!-- 删除悬浮框 -->
        <view v-if="edit" class="all-box type-area">
            <view class="all com-flex com-flex com-row-between">
                <view class="com-flex">
                    <u-checkbox-group v-model="selectAll" @change="all">
                        <u-checkbox name="all" size="40rpx" shape="circle" iconSize="30rpx"></u-checkbox>
                    </u-checkbox-group>
                    <text class="com-m-l-16">全选</text>
                </view>
                <u-button text="删除" 
                    shape="circle"
                    color="linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%)"
                    :customStyle="{width:'190rpx',height:'72rpx',margin:0,fontSize:'32rpx'}"
                    @click="del">
                </u-button>
            </view>
            <u-gap v-if="mixinGetSysInfo().platform == 'devtools'" height="30rpx" bgColor="transparent"></u-gap>
        </view>
        <!-- 底部安全距离 -->
        <u-gap :height="mixinGetSysInfo().platform == 'devtools' ? '126rpx' :'96rpx' " bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name: "",
    props: {},
    components: {},

    data() {
        return {
            // 分段器
            subsections: ['商品', '卖家', '活动'],
            current: 0,
            // 编辑
            edit: true,
            // 列表
            list: [1,2,3,4,5,6,7,8],
            // 全选
            selectAll: [], // 默认不全选
            checked: [], // 选中的
            value:3,
        };
    },

    computed: {},
    watch: { },

    mounted() { },

    methods: {
        // 切换tab
        subsection(e){
            this.current = e;
            this.edit = false;
            this.selectAll = [];
            this.checked = [];
        },

        // Item复选框改变
        checkboxChange(e){
            if(e.length == this.list.length){
                this.selectAll = ["all"];
            }else{
                this.selectAll = [];
            }
            console.log('选中的数据',e);
        },
        // 全选
        all(e){
            this.selectAll = e;
            this.checked = [];
            if(e.length){
                this.list.map(v=>{
                    this.checked.push(v);
                })
            }
            console.log('选中的数据',this.checked);
        }
    }
};
</script>


<style scoped lang='scss'>
    .subsection{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background: #fff;
        /deep/.u-subsection--button{
            height: auto !important;
            padding: 32rpx 3px !important;
        }
        /deep/.u-subsection--button__bar{
            &:after{
                content: "";
                width: 60rpx;
                height: 6rpx;
                background: #02BDF3;
                border-radius: 4rpx;
                position: absolute;
                left: 50%;
                transform: translate(-50%);
                bottom: -20rpx;
            }
        }
    }
    
    .top{
        margin: 28rpx 0;
    }

    .card{
        margin-top: 28rpx;
        padding: 32rpx;
        background: #fff;
        border-radius: 24rpx;
        // 商品、活动
        .good-item,.activity-item{
            margin-top: 32rpx;
            &:first-child{
                margin-top: 0;
            }
            image{
				width: 180rpx;
				height: 180rpx;
				margin-right: 26rpx;
				border-radius: 24rpx;
			}
			.right{
				flex: 1;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
        }

        // 卖家
        .seller-item{
            position: relative;
            margin-top: 32rpx;
            &:first-child{
                margin-top: 0;
            }
            image{
                width: 88rpx;
                height: 88rpx;
                background: #9C9BCB;
                border-radius: 50%;
            }
            .text{
                flex: 1;
                height: 130rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .real-name{
                    height: 36rpx;
                    background: #FFFFFF;
                    border: 1px solid #02BDF3;
                    border-radius: 18rpx;
                    padding-right: 16rpx;
                }
            }
            .btn{
                width: 128rpx;
                height: 48rpx;
                background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                border-radius: 8rpx;
                font-size: 24rpx;
                color: #fff;
                position: absolute;
                top: 10rpx;
                right: 0;
            }
        }
    }

    .all-box{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        .all{
            height: 96rpx;
        }
    }
</style>